<template>
  <div ref="wrapper" class="wrapper">
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: "Scroll",
    props:{
      probeType:{
        type:Number,
        default:0
      },
      click:{
        type: Boolean,
        default: true
      },
      pullUpLoad: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return{scroll:null}
    },
    mounted() {
      setTimeout(this.initScroll, 10)
    },
    methods:{
      initScroll(){
        this.scroll = new BScroll(this.$refs.wrapper,{
          probeTimer:this.probeType,
          click: this.click,
          pullUpLoad: this.pullUpLoad
        })

        if(this.probeType===2||this.probeType===3){
          this.scroll.on('scroll',position=>{
            this.$emit('scroll',position)
          })
        }

        if(this.pullUpLoad){
          this.scroll.on('pullingUp',()=>{
            this.$emit('pullingUp')
          })
        }
      },
      refresh(){
        this.scroll&&this.scroll.refresh()
      },
      finishedPullUp(){
        this.scroll&&this.scroll.finishPullUp()
      },
      scrollTo(x,y,time=100){
        this.scroll&&this.scroll.scrollTo(x,y,time)
      }
    },
    computed: {
      scrollY() {
        return this.scroll.y
      }
    },
  }
</script>

<style scoped>
  .wrapper {
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
</style>